{extend name="property/public/insidePageBase" /}
{block name="title"}添加公摊设备{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form  layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">物业筛选</label>
                        <div class="layui-input-block">
                            <select name="property_id"  lay-search>
                                <option value="">--请选择--</option>
                                {foreach $propertyData as $k=>$v}
                                <option value="{$v['id']}">{$v['name']}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">方案呢称</label>
                        <div class="layui-input-block">
                            <input type="text" name="plan_name" placeholder="请输入方案名称" class="layui-input" lay-verify="required" autocomplete="off"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备类型</label>
                        <div class="layui-input-block">
                            <select name="energy_type" lay-filter="energy_type" lay-search>
                                <option value="">--请选择--</option>
                                {foreach $energyTypeData as $k=>$v}
                                <option value="{$k}">{$v}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">设备选择</label>
                        <div class="layui-input-block" id="energy_meter_show">
                            <input type="text" name="energy_id" disabled placeholder="请选择设备类型" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">公摊方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="plan_type" lay-filter="plan_type" autocomplete="off" value="1" title="按面积公摊">
                    <input type="radio" name="plan_type" lay-filter="plan_type" autocomplete="off" value="2" title="按比例公摊">
                    <!--                    <input type="radio" name="plan_type" autocomplete="off" value="3" title="按用量比例">-->
                </div>
            </div>
            <div class="layui-form-item plan_type_b" pane="" style="display: none">
                <label class="layui-form-label">比例方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_type" autocomplete="off" value="1" title="默认按比例均分">
                    <input type="radio" name="is_type" autocomplete="off" value="2" title="自定义比例分摊">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明"  name="remark" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>

<script id="energy_meter_tpl" type="text/html">
    <select name="energy_id" lay-filter="energy_id" id="energy_id">
        <option value="">请选择</option>
        {{# layui.each(d.meterList, function(index, elem) { }}
        <option value="{{elem.id}}">{{elem.energy_name}}</option>
        {{# }) }}
    </select>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use([ 'form', 'layer','laytpl'], function () {
        var form = layui.form,layer = layui.layer,$ = layui.$,laytpl = layui.laytpl;
        form.on('select(energy_type)', function(res) {
            let value = res.value
            loadEnergyType(value)
        })
        function loadEnergyType(energyType) {
            $.get('{:request()->url()}', {energy_type:energyType,get_type:'meterData'}, function(res) {
                if(res.code == 0) {
                    var getTpl = document.getElementById('energy_meter_tpl').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('energy_meter_show'); // 视图对象
                    laytpl(getTpl).render({meterList:res.data}, function(str){
                        elemView.innerHTML = str;
                        form.render('select')
                    });
                }

            })
        }
        form.on('radio(plan_type)', function(data) {
            if(data.value == 1) {
                $('.plan_type_b').hide();
            }
            if(data.value == 2) {
                $('.plan_type_b').show();
            }
        });
    });
</script>
{/block}